<template>
	<view class="serviceSet">
		<custom-navi :show-home="false">客服中心</custom-navi>
		<view class="familiar">
			<view class="familiar-title">
				常见问题
			</view>
			<view class="familiar-list">
				<view v-for="(item,index) in familiar" :key="index" class="familiar-content" @click="handlePopIssue(item)">
					<view class="familiar-img">
						<image :src="item.src" mode=""></image>
					</view>
					<view class="familiar-text">
						{{item.txt}}
					</view>
					<view class="familiar-icon">
						<image src="/static/little-more.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="service">
			<view class="service-title">
				没有找到相关问题 ？
			</view>
			<view class="service-btn">
				<view class="service-online" @click="nesBtn">
					<view><image src="/static/myicon/zxkf.png" mode=""></image></view>
					<view><text>在线客服</text></view>
				</view>
				<view class="service-online" @click="callUp">
					<view><image src="/static/myicon/phone.png" mode=""></image></view>
					<view><text>拨打电话</text></view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
		  <view class="modalCall">
		  	<view class="modalCall-call">
		  		<view class="">
		  			<text>呼叫</text>
					<text class="modalCall-grees">{{phone}}</text>
		  		</view>
				<view class="">
					<text>工作时间 : </text>
					<text>每天9:00-23:00</text>
				</view>
		  	</view>
			<view class="modalCall-btn">
				<view @click="handlePopClose">
					取消
				</view>
				<view @click="handlePopCall">
					呼叫
				</view>
			</view>
		  </view>
		</uni-popup>
		<!-- <view class="more">
			<view class="more-title">
				更多问题分类
			</view>
			<view class="more-list">
				<view class="more-content">
					<view class="more-text">
						付款安全
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import uniPopup from '@/src/pages/components/uni-popup/uni-popup.vue';
	export default {
		components: { uniPopup },
		data(){
			return {
				shopInfo:'',
				phone:'400-8520-071',
				familiar:[
					{txt:'餐饮合作问题',src:'/static/richTxt/shouji2.png',url: '/src/pages/my/pages/cooperation/index',},
					{txt:'门店信息修改（门店名称、电话等）',src:'/static/richTxt/xiugaio2.png',url: '/src/pages/my/pages/editIssue/index',},
					// {txt:'餐饮合作问题',src:'',url: '/src/pages/my/pages/cooperation/index',},
					// {txt:'餐饮合作问题',src:'',url: '/src/pages/my/pages/cooperation/index',},
				],
				// more:[
				// 	{txt:'付款安全',url:''},
				// 	{txt:'付款安全',url:''},
				// 	{txt:'投诉业务员',url:''},
				// 	{txt:'验证相关',url:''},
				// 	{txt:'评价评分相关',url:''},
				// 	{txt:'付款安全',url:''},
				// ]
			}
		},
		onShow(){
			const _self = this
			uni.getStorage({
			  key: 'shopInfo',
			  success: function (res) {
			    _self.shopInfo = res.data
			  }
			});
		},
		methods:{
			nesBtn(){
				window.location.href = `http://192.168.10.247:8080/?ut=1&tid=${this.shopInfo.id}&sn=${this.shopInfo.shopName}`
			},
			callUp(){
				this.$refs.popup.open()
			},
			handlePopClose(){
				 this.$refs.popup.close();
			},
			handlePopCall(){
				uni.makePhoneCall({
				    phoneNumber: this.phone //仅为示例
				});
				 this.$refs.popup.close();
			},
			handlePopIssue(res){
				uni.navigateTo({
				  url: res.url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.familiar{
		&-title{
			padding: 20rpx 30rpx;
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(80,80,80,1);
			opacity:1;
			// background: rgba(243,244,248,1);
		}
		&-list{
			background: rgba(255,255,255,1);
			padding: 0 30rpx;
		}
		&-content{
			height: 114rpx;
			border-bottom: 1rpx solid rgba(217,217,217,1);
			display: flex;
			align-items: center;
			view{
				margin-right: 32rpx;
			}
		}
		&-content:last-child{
			border: none;
		}
		&-img{
			width: 68rpx;
			height: 68rpx;
			border-radius: 50%;
			overflow: hidden;
			// background-color: #0CD4D3;
		}
		&-text{
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(80,80,80,1);
			opacity:1;
			
		}
		&-icon{
			width: 25rpx;
			height: 25rpx;
			position: absolute;
			right: 0;
		}
		image{
			width: 100%;
			height: 100%;
		}
	}
	.service{
		background: rgba(255,255,255,1);
		padding:20rpx 30rpx;
		margin-top: 20rpx;
		&-title{
			height: 50rpx;
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:400;
			line-height:38rpx;
			color:rgba(80,80,80,1);
			opacity:1;
			border-bottom: 1rpx solid rgba(217,217,217,1);
		}
		&-online{
			width:300rpx;
			height:66rpx;
			background:rgba(255,255,255,1);
			border:1px solid rgba(153,153,153,1);
			opacity:1;
			border-radius:10px;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(80,80,80,1);
			text-align: center;
			// line-height: 66rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		&-online:first-child{
			margin-right: 26rpx;
		}
		&-btn{
			display: flex;
			margin: 35rpx 0;
			justify-content: center;
			align-items: center;
			// view{
			// 	// display: inline-block;
			// 	width:300rpx;
			// 	height:66rpx;
			// 	background:rgba(255,255,255,1);
			// 	border:1px solid rgba(153,153,153,1);
			// 	opacity:1;
			// 	border-radius:10px;
			// 	font-size: 24rpx;
			// 	font-weight: 400;
			// 	color: rgba(80,80,80,1);
			// 	text-align: center;
			// 	line-height: 66rpx;
			// }
			// view:first-child{
			// 	margin-right: 26rpx;
			// }
			text{
				margin-left: 10rpx;
			}
			image{
				width: 28rpx;
				height: 28rpx;
				margin-top: 10rpx;
			}
		}
	}
	.modalCall{
		width:540rpx;
		height:310rpx;
		background:rgba(255,255,255,1);
		opacity:1;
		border-radius:20rpx;
		&-call{
			width:540rpx;
			height:220rpx;
			border-bottom: 1rpx solid rgba(217,217,217,1);
			text-align: center;
			padding: 36rpx 0;
			view{
				font-size:32rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(80,80,80,1);
				opacity:1;
				margin-top: 22rpx;
				text{
					margin-right: 10rpx;
				}
			}
		}
		&-grees{
			color:rgba(12,212,211,1);
		}
		&-btn{
			display: flex;
			view{
				height: 88rpx;
				flex: 1;
				text-align: center;
				line-height: 88rpx;
				font-size:32rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(153,153,153,1);
				opacity:1;
			}
			view:last-child{
				color: rgba(12,212,211,1);
				border-left: 1rpx solid rgba(217,217,217,1);
			}
		}
	}
	
	// .more{
	// 	&-title{
	// 		padding: 20rpx 30rpx;
	// 		font-size:28rpx;
	// 		font-family:PingFang SC;
	// 		font-weight:400;
	// 		color:rgba(80,80,80,1);
	// 		opacity:1;
	// 		background: rgba(243,244,248,1);
	// 	}
	// 	&-list{
	// 		background: rgba(255,255,255,1);
	// 		// padding: 0 16rpx;
	// 	}
	// 	&-text{
	// 		display: inline-block;
	// 		width: 50%;
	// 		height: 120rpx;
	// 		border-right: 1px solid rgba(217,217,217,1);
	// 		border-bottom: 1px solid rgba(217,217,217,1);
	// 		text-align: center;
	// 		line-height: 120rpx;
	// 	}
	// }
</style>
